computed

computed 接收一个 getter 函数，并通过一个由 getter 函数返回的值，创建一个不可变更的响应式 ref 对象。

代码是最好的解释:

  1. <script>
  2.   import { createComponent, ref, computed } from '@vue/composition-api'
  3.   export default createComponent({
  4.     setup() {
  5.       const count = ref(1)
  6.       const plusOne = computed(() => count.value + 1)
  8.       console.log(plusOne.value) // 2
  10.       // 当count的值被变更，plusOne被触发重新计算并返回新的值。
  11.       count.value = 8
  13.       console.log(plusOne.value) // 9
  15.       // 但 plusOne 不可变更。
  16.       plusOne.value++ // 错误
  17.     }
  18.   })
  19. </script>

另外，根据需要你也可以同时提供 get 和 set 函数来创建一个可写的 ref 对象。

  1. const count = ref(1)
  2. const plusOne = computed({
  3.   get: () => count.value + 1,
  4.   set: val => {
  5.     count.value = val - 1
  6.   }
  7. })
  9. plusOne.value = 1
  10. console.log(count.value) // 0